<template>
	<div class="statistics">
		<!-- <div v-if="props.loading" class="loading-page">
			<a-spin size="large" tip="加载中..." />
		</div> -->
		<div class="boxes">
			<div class="statistics-num">
				全部盒子<span>{{ props.statisticsData.boxCountVos.allNums }}</span>
			</div>
			<div class="online-type">
				<div class="online">
					在线 <span>{{ props.statisticsData.boxCountVos.onlineNums }}</span>
				</div>
				<div class="offline">
					离线 <span>{{ props.statisticsData.boxCountVos.outlineNums }}</span>
				</div>
			</div>
		</div>
		<div class="boxes">
			<div class="statistics-num">
				全部设备<span>{{ props.statisticsData.deviceCountVos.allNums }}</span>
			</div>
			<div class="online-type">
				<div class="online">
					在线 <span>{{ props.statisticsData.deviceCountVos.onlineNums }}</span>
				</div>
				<div class="offline">
					离线 <span>{{ props.statisticsData.deviceCountVos.outlineNums }}</span>
				</div>
			</div>
		</div>
	</div>
</template>

<script setup lang="ts" name="Statistics">
interface TsStatisticsItem {
	allNums: number;
	onlineNums: number;
	outlineNums: number;
}
interface TsStatisticsData {
	boxCountVos: TsStatisticsItem;
	deviceCountVos: TsStatisticsItem;
}

type TsProps = {
	loading: boolean;
	statisticsData: TsStatisticsData;
};
const props = withDefaults(defineProps<TsProps>(), {
	loading: false,
	statisticsData: () => ({
		boxCountVos: {
			allNums: 1,
			onlineNums: 1,
			outlineNums: 1
		},
		deviceCountVos: {
			allNums: 1,
			onlineNums: 1,
			outlineNums: 1
		}
	})
});
</script>

<style lang="less" scoped>
.statistics {
	position: relative;

	.loading-page {
		position: absolute;
		top: 0;
		z-index: 9999;
		display: flex;
		width: 100%;
		height: 100%;
		border-radius: 6px;
		background-color: rgba(23, 40, 69, 0.96);
		transition: transform 0.3s cubic-bezier(0.78, 0.14, 0.15, 0.86);
		align-items: center;
		justify-content: center;
		backdrop-filter: saturate(244%) blur(5px);

		.ant-spin {
			color: rgba(24, 104, 233, 0.65);
			transform: scale(0.8);
		}
	}

	.boxes {
		width: 100%;
		height: 121px;
		margin-bottom: 24px;
		padding: 29px 0 28px 114px;
		background: url('@/global-assets/svgs/situation-box.svg') no-repeat left bottom;
		background-size: 100% 100%;

		.statistics-num {
			margin-bottom: 12px;
			font-size: 16px;
			line-height: 24px;
			color: rgba(255, 255, 255, 0.8);

			span {
				margin-left: 8px;
				font-family: 'D-DIN';
				font-size: 24px;
				font-weight: 700;
				line-height: 26px;
				color: #fff;
			}
		}

		.online-type {
			display: flex;
			font-family: 'D-DIN';
			color: #fff;

			.online,
			.offline {
				width: 86px;
				height: 26px;
				font-size: 12px;
				line-height: 26px;
				text-align: center;
				background: url('@/global-assets/imgs/online.png') no-repeat;
				background-size: 88px 34px;
				text-shadow: 0 1.2999999523162842px 1.2999999523162842px 0 rgba(0, 0, 0, 0.35);

				span {
					position: relative;
					top: 2px;
					left: 5px;
					display: inline-block;
					width: 42px;
					font-size: 18px;
					line-height: 18px;
				}
			}

			.offline {
				margin-left: 8px;
				background: url('@/global-assets/imgs/offline.png') no-repeat;
				background-size: 88px 34px;
			}
		}
	}

	.boxes:last-child {
		background: url('@/global-assets/svgs/situation-camera.svg') no-repeat left bottom;
		background-size: 100% 100%;
	}
}
</style>
